<template>
  <div class="boxWrap" style="">
    <div class="left">
      <div class="title">
        <h1>{{pageData.baseDto.solvePlanBackTitle}}</h1>
        <h2>{{pageData.baseDto.solvePlanTitle}}</h2>
      </div>
      <div class="name" style="" :class="{'nameEN': curLocale == 'en'}">
        <span>{{pageData.baseDto.solvePlanTitle1}}</span>
        <img class="img" :src="pageData.baseDto.solvePlanIcon"/>
      </div>
      <div class="desc">
        <div class="text1">{{pageData.baseDto.solvePlanTitle2}}</div>
        <div class="text2" v-html="pageData.baseDto.solvePlanContent"></div>
      </div>
      <div class="button" @click="linkTo('/solvePlan')">{{pageData.baseDto.solvePlanButton}}</div>
    </div>

    <div class="right">
      <div class="item" v-for="(item, index) in pageData.solvePlanContents">
        <div class="title">{{item.title}}</div>
        <div class="line"></div>
        <div class="imgBox">
          <img class="img" :src="item.backUrl"/>
        </div>
        <div class="text">{{item.descrip}}</div>
      </div>
    </div>

    <div class="rightMobile">
      <div class="item" v-for="(item, index) in pageData.solvePlanContents">
        <div class="imgBox">
          <img class="img" :src="item.backUrl"/>
        </div>
        <div class="textBox">
          <div class="title">{{item.title}}</div>
          <div class="line"></div>
          <div class="text">{{item.descrip}}</div>
        </div>
      </div>
    </div>

  </div>

  <div class="buttonMobile" @click="linkTo('/solvePlan')">{{pageData.baseDto.solvePlanButton}}</div>
</template>

<script setup>
  import {ref, computed} from 'vue'

  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()
  import {useLocaleStore} from '../../store/locales.js'

  const curLocale = computed(() => {		// 定义计算属性
    const useLocale = useLocaleStore()
    return useLocale.locale
  })

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })

  // 路由跳转
  const linkTo = (url) => {
    routerLink(url)
  }

</script>

<style scoped lang="scss">

  @media screen and (max-width: 1079px) {

    .boxWrap {
      width: 100%;
      margin-top: 15px;
      .left {
        .title {
          h1 {
            display: none;
          }
          h2 {
            font-size: 16px;
            line-height: 40px;
            color: #1A1A25;
          }
        }
        .name {
          font-size: 30px;
          font-weight: bold;
          line-height: 50px;
          span {
          }
          .img {
            width: 30px;
            vertical-align: top;
            margin-left: 1vw
          }
        }
        .desc {
          .text1 {
            font-size: 18px;
            font-weight: bold;
            line-height: 30px;
          }
          .text2 {
            font-size: 14px;
            color: #69696F;
            margin: 10px 0 20px;
          }
        }
        .button {
          display: none;
        }
      }

      .right {
        display: none;
      }
      .rightMobile {
        .item {
          display: flex;
          align-items: center;
          margin-top: 10px;
          .imgBox {
            width: 40%;
            .img {
              width: 100%;
              display: block;
            }
          }
          .textBox {
            width: 60%;
            padding-left: 10px;
            .title {
              font-size: 30px;
              line-height: 50px;
              font-weight: bold;
              &.case1 {
                font-size: 1.2vw;
                line-height: 1.5vw;
              }
            }
            .line {
              width: 30px;
              border-bottom: 2px solid #1027ef;
            }
            .text {
              font-size: 14px;
              padding-top: 20px;
            }
          }
        }
      }
    }

    .buttonMobile {
      width: 100%;
      height: 36px;
      background-color: #1027EF;
      color: #fff;
      text-align: center;
      line-height: 36px;
      margin: 10px 0;
      font-size: 12px;
    }
  }

  @media screen and (min-width: 1080px) {

    .boxWrap {
      width: 100%;
      display: flex;
      margin-top: 4vw;

      .left {
        width: 19vw;
        .title {
          height: 8vw;
          position: relative;
          h1 {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 3vw;
            color: #f6f6f6;
            font-weight: normal;
            z-index: -1;
            line-height: 4vw;
          }
          h2 {
            font-size: 2vw;
            line-height: 6.5vw;
            color: #1A1A25; font-weight: bold;
          }
        }
        .name {
          font-size: 3vw;
          font-weight: bold;
          &.nameEN{
            font-size: 2vw;
          }
          span {
          }
          .img {
            width: 3vw;
            vertical-align: top;
            margin-left: 1vw
          }
        }
        .desc {
          .text1 {
            font-size: 1.2vw;
            font-weight: bold;
            line-height: 2vw; padding-top: 1.4vw;
          }
          .text2 {
            font-size: 0.8vw;
            color: #69696F;
            margin-top: 1vw;
          }
        }

        .button {
          width: 9vw;
          height: 2vw;
          background-color: #1027EF;
          color: #fff;
          text-align: center;
          line-height: 2vw;
          margin: 4vw 0;
          font-size: 0.8vw;
          cursor: pointer;
        }
      }

      .rightMobile {
        display: none;
      }
      .right {
        width: 56vw;
        display: flex;
        .item {
          flex: 1;
          border-left: 1px solid #f3f3f3;
          padding: 0 0.8vw;
          .title {
            font-size: 2vw;
            line-height: 3.2vw; font-weight: bold;
          }
          .line {
            width: 1.8vw;
            border-bottom: 0.25vw solid #1027ef;
          }
          .imgBox{
            margin: 3vw 0 0.8vw;
            height: 21.5vw; overflow: hidden;
            .img {
              width: 100%; height: 100%; display: block; transition: all 0.5s;
              &:hover{
                transform: scale(1.05);
              }
            }
          }

          .text {
            font-size: 0.8vw;
            color: #1A1A25;
            padding-bottom: 2vw;
          }
        }
      }

    }

    .buttonMobile {
      display: none;
    }
  }


</style>
